<template>
  <div style="height: 100%; width: 100%">
    <header class="header">
      <div class="headerLeft">
        <router-link to="/" class="toIndex">金星工作室</router-link>
      </div>
      <div class="headerRight">
        <router-link to="/login" v-if="displayLogin" class="link">登录</router-link>
        <router-link to="/register" v-if="displayLogin" class="link">注册</router-link>
        <el-avatar :src="head" v-if="displayHead" @click.native="toUser"></el-avatar>
      </div>
    </header>
    <div class="mainContainer">
      <div class="cardWrapper">
        <div class="card" v-for="aWork in works" v-bind:key="aWork.wid">
          <div class="cardHead">
            <el-avatar :src="'http://localhost:10001/head/' + aWork.owner + '.jpg'" class="workAvatar"></el-avatar>
            <span class="username" v-text="userinfos[aWork.owner.toString()].name"></span>
          </div>
          <div class="cardBody" @click="toWork(aWork.realID)">
            <span class="workTitle" v-text="aWork.name"></span>
            <div class="workIntr">
              <div class="imageWrapper">
                <img class="workHDImg" :src="'http://localhost:10001/work/' + aWork.realID + '/hdImg.png'" />
              </div>
              <div class="workDescription">{{aWork.description}}</div>
            </div>
          </div>
          <div class="cardFoot">
            <div class="replies">
              <span class="noReply" v-if="replyCounts[aWork.realID] === 0">求回复</span>
              <span class="replyCount" v-else v-text="'回复' + replyCounts[aWork.realID]"></span>
            </div>
            <span class="createTime" v-text="aWork.createDate"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import storage from 'good-storage'
import particleBackground from './particleBackground'
import work from '../api/work'
import { getUserInfo } from '../util/userutil'
import reply from '../api/reply'

export default {
  name: 'works',
  data () {
    return {
      displayLogin: true,
      head: '',
      displayHead: false,
      works: null,
      page: 0,
      userinfos: {},
      replyCounts: {}
    }
  },
  components: {
    background: particleBackground
  },
  methods: {
    toUser: function () {
      this.$router.push('/user')
    },
    toWork: function (wid) {
      this.$router.push('/work/' + wid)
    }
  },
  created () {
    let userinfo = storage.session.get('user')
    if (userinfo !== undefined) {
      console.log(userinfo)
      let id = userinfo.id
      this.head = 'http://localhost:10001/head/' + id.toString() + '.jpg'
      this.displayLogin = false
      this.displayHead = true
    }
    work.queryAllWorks(this, 1).then(resp => {
      console.log(resp)
      this.works = resp
      this.works.forEach(ele => {
        getUserInfo(ele.owner).then(result => {
          this.$set(this.userinfos, ele.owner.toString(), result)
        })
      })
      this.works.forEach(ele => {
        reply.queryWorkReplyCount(ele.realID).then(resp => {
          this.$set(this.replyCounts, ele.realID.toString(), resp)
        })
      })
    })
  }
}
</script>

<style src="../style/works.less" lang="less" scoped></style>
